<!--过滤查询-->
<nz-row>
  <div class="searchItem">
    <label>状态</label>
    <nz-select [(ngModel)]="query.status" nzPlaceHolder="请选择" [nzBackdrop]="true" (ngModelChange)="getHotSearchList()">
      <nz-option [nzValue]="''" nzLabel="全部"></nz-option>
      <nz-option [nzValue]="0" nzLabel="禁用"></nz-option>
      <nz-option [nzValue]="1" nzLabel="启用"></nz-option>
      <!--          <nz-option [nzValue]="2" nzLabel="已删除"></nz-option>-->
      <!--          <nz-option [nzValue]="3" nzLabel="已结束"></nz-option>-->
    </nz-select>
  </div>
</nz-row>
<div style="margin-bottom: 8px">
  <button nz-button nzType="primary" (click)="showEdit()">添加热搜</button>
</div>
<!--表格-->
<nz-table #basicTable [nzData]="listOfData.records"
          nzSize="small"
          nzShowSizeChanger
          nzShowPagination="false"
          [nzFrontPagination]="false"
>
  <thead>
  <tr>
        <th nzAlign="center">排序</th>
    <th nzAlign="center" nzWidth="300px">商品名称</th>
    <!--    <th nzAlign="center">标签</th>-->
    <!--    <th nzAlign="center">链接</th>-->
    <!--    <th nzAlign="center">开始时间</th>-->
    <!--    <th nzAlign="center">结束时间</th>-->
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="200px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data;let index=index;">
        <td nzAlign="center">{{ index +1 }}</td>
    <td nzAlign="center">{{ data['word'] }}</td>
    <!--    <td nzAlign="center">-->
    <!--      <img-->
    <!--        nz-image-->
    <!--        width="60px"-->
    <!--        height="60px"-->
    <!--        *ngIf="data['hpicUrl']"-->
    <!--        [nzSrc]="data['hpicUrl']"-->
    <!--      />-->
    <!--    </td>-->
    <!--    <td nzAlign="center">{{ data['hurl'] }}</td>-->
    <!--    <td nzAlign="center">{{ data['beginTime'] }}</td>-->
    <!--    <td nzAlign="center">{{ data['endTime'] }}</td>-->
    <td nzAlign="center" [attr.status]="data['status']">{{ data['status'] === 1 ? '启用' : '禁用'}}</td>
    <td nzAlign="center">
      <a (click)="move(data['id'],1)" *ngIf="index!==0">上移</a>
      <a (click)="move(data['id'],0)" *ngIf="index+1!==basicTable.data.length">下移</a>
      <a (click)="changeStatus(data,1)" [attr.statusColor]="data['status']" *ngIf="data['status']===0">启用</a>
      <a (click)="changeStatus(data,0)" [attr.statusColor]="data['status']" *ngIf="data['status']===1">禁用</a>
      <a (click)="showEdit(data)">编辑</a>
      <a nzPopconfirmPlacement="top" [attr.statusColor]="1"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除?"
         nzOkText="确认"
         nzCancelText="取消" (nzOnConfirm)="deleteHotSearch(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>


<!--热搜管理-->
<nz-modal
  [(nzVisible)]="editModal.visible"
  nzTitle="热搜管理"
  (nzOnCancel)="hideEditModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label><span>*</span>名称</label>
      <input nz-input placeholder="请输入名称" [(ngModel)]="editModal.word"/>
    </div>
    <div class="rowItem">
      <label>状态</label>
      <nz-radio-group [(ngModel)]="editModal.status">
        <label nz-radio [nzValue]="0">禁用</label>
        <label nz-radio [nzValue]="1">启用</label>
      </nz-radio-group>
    </div>
    <!--    <div class="rowItem">-->
    <!--      <label style="vertical-align: top">标签</label>-->
    <!--      <app-image-upload style="width: 250px;display: inline-block"-->
    <!--                        [maxImgLength]="1"-->
    <!--                        [imageUrl]="editModal.hpicUrl"-->
    <!--                        (deleteImg)="editModal.hpicUrl=''"-->
    <!--                        (urlChange)="editModal.hpicUrl=$event"></app-image-upload>-->
    <!--    </div>-->
    <!--    <div class="rowItem">-->
    <!--      <label>链接</label>-->
    <!--      <input nz-input placeholder="请输入链接" [(ngModel)]="editModal.hurl"/>-->
    <!--    </div>-->
    <!--    <div class="rowItem">-->
    <!--      <label><span>*</span>生效时间</label>-->
    <!--      <nz-range-picker-->
    <!--        nzShowTime-->
    <!--        nzFormat="yyyy-MM-dd HH:mm:ss"-->
    <!--        [(ngModel)]="editModal.date"-->
    <!--      ></nz-range-picker>-->
    <!--    </div>-->
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideEditModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveHotSearch()">确认</button>
  </div>
</nz-modal>
